<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
</head>
<body>
<div style="margin-bottom: 5px;">

</div>



<table id="demo1" lay-filter="test1"></table>

<script src="../static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        var id=${data.id};
        console.log(JSON.stringify(id));
        table.render({
            elem: '#demo1'
            ,height: 450
            ,url: '/Employee/getPerformanceDetail?id='+encodeURIComponent(JSON.stringify(id))//数据接口
            ,page: true //开启分页
            ,cellMinWidth: 80
            ,request:
                {
                    pageName:"curr"
                    ,limitName:"limit"
                }
            ,curr:1
            ,limit:10
            ,id:'idTest'
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'}
                ,{field: 'id', title: '员工编号', align: 'center', sort: true, fixed: 'left'}
                ,{field: 'employeeName', title: '员工姓名', align: 'center'}
                ,{field: 'goodsName', title: '商品名称', align: 'center'}
                ,{field: 'price', title: '单价', align: 'center'}
                ,{field: 'performance', title: '业绩', align: 'center'}
            ]]
        });


        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });


        layui.jquery('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>